<template>
    <!--订单查询-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('common.systemOrderSearch')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="User ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userName" label="">
                            <el-input v-model="form.userName" :placeholder="$t('common.name')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="search" type="primary" icon="el-icon-search">{{ $t('common.search') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;"
                              :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column prop="orderId" width="200" :label="$t('common.innerOrderId')"></el-table-column><!--内部订单号-->
                        <el-table-column prop="userId" label="User Id" width="100"></el-table-column>
                        <el-table-column prop="userName" :label="$t('common.name')" width="130"></el-table-column><!--姓名-->
                        <el-table-column prop="userPhone" :label="$t('common.mobileNumber')" width="150"></el-table-column><!--手机号-->
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" width="160"></el-table-column><!--APP名称-->
                        <el-table-column prop="contractAmount" :label="$t('common.contractAmount')" width="150"><!--合同金额-->
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowAmount')" prop="loanAmount" min-width="120"><!--借款金额-->
                             <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanType')" prop="payChannel" min-width="180"><!--放款方式-->
                            <template slot-scope="{ row }">{{ row.payChannel | SwitchLoanChannel }}</template>
                        </el-table-column>
                        <el-table-column  :label="$t('common.loanSerialNumber')" prop="controlNumber" width="200"><!--放款序列号-->
                            <template slot-scope="{ row }">
                                <el-button :disabled="!showControlNumber" type="text" @click="checkControlNumber(row.orderId)">{{ $t('common.check') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.repaySerialNumber')" prop="contractNumber" min-width="170"></el-table-column><!--还款序列号-->
                        <el-table-column prop="applyTime" width="180" :label="$t('common.applyDate')"><!--申请日期-->
                            <template slot-scope="scope">{{ scope.row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanCompleteTime')" prop="loanCompletionTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.loanCompletionTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--放款完成时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.cashWithdrawalTime')" prop="withdrawTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.withdrawTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--取现时间-->
                        </el-table-column>
                        <el-table-column prop="status" :label="$t('common.orderStatus')" min-width="150"><!--订单状态-->
                            <template slot-scope="scope">{{ scope.row.status | switchOrderStatus }}</template>
                        </el-table-column>
                        <el-table-column prop="refundStatus" :label="$t('common.refundStatus')" min-width="170">
                            <template slot-scope="{ row }">
                                <el-button type="text" @click="showRefundDetails(row.orderId)">{{ row.refundStatus | switchRefundStatus}}</el-button>
                            </template>
                        </el-table-column><!--退款状态-->
                    </el-table>
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div>
            </div>
        </div>

        <!--放款序列号弹框start-->
        <alert-dialog :title="$t('common.loanSerialNumber')" class="applyDialog" width="430px" :visible.sync="controlNumberDialog" :dialogPosition="'center'">
            <div class="main">
                <el-row >
                    <el-col :span="8">{{$t('common.loanSerialNumber')}} ：</el-col>
                    <el-col :span="10">{{this.controlNumber}}</el-col>
                </el-row>
            </div>
        </alert-dialog>
        <!--放款序列号弹框end-->

        <!--退款详情弹框start-->
        <el-dialog :title="$t('common.refundDetails')" :width="$i18n.locale === 'zhCN' ? '400px' : '450px'" :visible.sync="refundDetailsDialog">
            <div class="main">
                <div class="dialogContent" v-for="(item, index) in refundData" :key="index">
                    <el-row>
                        <el-col :span="12">{{$t('common.applyDate')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.applyTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="12">{{$t('common.nowStatus')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.refundStatus | switchRefundStatus}}</el-col>
                    </el-row>
                    <el-row v-if="item.refundStatus === 5">
                        <el-col :span="12">{{$t('common.refundTime')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.refundCompletionTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</el-col>
                    </el-row>
                    <el-row v-if="item.refundStatus === 4">
                        <el-col :span="12">{{$t('common.refuseReason')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.refuseReasons }}</el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="12">{{$t('common.refundAmount')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.refundAmount | formatCurrency }}</el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="12">{{$t('common.refundDetailReceiptChannel')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.payChannel | SwitchLoanChannel}}</el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="12">{{$t('common.refundDetailReceiptAccount')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.withdrawAccount }}</el-col>
                    </el-row>
                    <el-row v-if="item.payChannel === 5">
                        <el-col :span="12">{{$t('common.refundDetailBankName')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.withdrawAccountBank}}</el-col>
                    </el-row>
                    <el-row v-if="item.payChannel === 5">
                        <el-col :span="12">{{$t('common.nationality')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.nationalityName }}</el-col>
                    </el-row>
                    <el-row v-if="item.payChannel === 5">
                        <el-col :span="12">{{$t('common.motherName')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.motherName }}</el-col>
                    </el-row>
                    <el-row v-if="item.payChannel === 5">
                        <el-col :span="12">{{$t('common.birthplace')}} ：</el-col>
                        <el-col :span="12" class="info text_right">{{ item.birthPlace }}</el-col>
                    </el-row>
                    <el-row v-if="index !== refundData.length -1">
                        <div class="line"></div>
                    </el-row>
                </div>
            </div>
        </el-dialog>
        <!--退款详情弹框end-->
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import alertDialog from '@/components/alert-dialog';
    import SelectAppList from '@/components/select-app-list';

    let that = null;
    export default {
        name: 'system-order-search',
        components: {
            Pagination,
            alertDialog,
            SelectAppList
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    orderId: '',
                    userId: '',
                    appName: '',
                    userPhone: '',
                    userName: ''
                },
                controlNumberDialog: false,
                controlNumber: '',
                refundDetailsDialog: false,
                refundData: [],
                rules: {
                    userId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userPhone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ]
                },
            };
        },
        computed: {
            showControlNumber() {
                // 查看放款序列号权限
                return this.$store.getters.checkUserAuthority('customerService.systemOrderSearch.showControlNumber');
            },
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.systemOrder.queryOrder(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 265;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        const form = this.form;
                        if(!form.orderId && !form.userId && !form.userName && !form.userPhone ) {
                            this.$message.warning(this.$t('verify.plsCheckSearch'));
                            return;
                        }
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: '',
                    userId: '',
                    appName: '',
                    userPhone: '',
                    userName: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                return params;
            },
            // 查看还款序列号
            checkControlNumber(orderId) {
                this.controlNumber = '';
                this.controlNumberDialog = true;
                this.$api.systemOrder.queryControlNumber({ orderId: orderId}).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.controlNumber = data.controlNumber || '';
                    }
                });
            },
            showRefundDetails(orderId) {
                this.refundData = [];
                this.$api.finance.refund.queryAllRefundInfoByOrderId({ orderId: orderId}).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.refundData = data;
                        this.refundDetailsDialog = true;
                    }
                });
            }
        },
        filters: {
            switchOrderStatus(status) {
                switch (status + '') {
                    case '0':
                        return that.$t('common.unProcessed'); //未处理
                    case '1':
                        return that.$t('audit.auditing');//信审中
                    case '2':
                        return that.$t('audit.auditSuccess');//信审通过
                    case '3':
                        return that.$t('audit.auditRefuse');//信审拒绝
                    case '4':
                        return that.$t('pageTitle.telVerifying');//电核中
                    case '5':
                        return that.$t('pageTitle.telPass');//电核通过
                    case '6':
                        return that.$t('pageTitle.telRefuse');//电核拒绝
                    case '7':
                        return that.$t('common.loaning');//放款中
                    case '8':
                        return that.$t('common.loanSuccess');//放款成功
                    case '9':
                        return that.$t('common.loanRefused');//放款拒绝
                    case '10':
                        return that.$t('common.overdueNotRepay');//逾期未还
                    case '11':
                        return that.$t('finance.repaySuccess');//还款成功
                    default:
                        return '';
                }
            },
            switchRefundStatus(status) {
                switch (status + '') {
                    case '1':
                        return that.$t('common.waitRefund');//待退款
                    case '2':
                        return that.$t('common.refunding');//退款中
                    case '3':
                        return that.$t('common.refundfailed');//退款失败
                    case '4':
                        return that.$t('common.refundRefuse');//退款拒绝
                    case '5':
                        return that.$t('common.refundSuccess');//退款成功
                    default:
                        return '';
                }
            }
        },
        created() {
            that = this;
            // this.getTableData({currentPage: this.page.currentPage}, this.form);
        },
    };
</script>

<style lang="scss">
    [data-page=system-order-search] {
        .noteRed {
            color: red;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
        .dialogContent {
            .el-row {
                margin-bottom: 5px;
            }
            .info {
                word-wrap: break-word;
            }
        }
        .line {
            margin: 10px 0;
            border-bottom: 1px solid #d4d7da;
        }
    }
</style>
